<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
			<el-row>
			  <el-col>
			    <el-button type="primary" @click="goAddAuth">添加权限</el-button>
			  </el-col>
			</el-row>
      <!-- 用户列表区域 -->
			<tree-table class="treeTable" :is-fold="false" :data="authsList" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border :show-row-hover="false">
			  <!-- 权限等级 -->
			  <template slot="level" slot-scope="scope">
			    <el-tag size="mini" v-if="scope.row.level===1">一级</el-tag>
			    <el-tag type="success" size="mini" v-else-if="scope.row.level===2">二级</el-tag>
			    <el-tag type="warning" size="mini" v-else>三级</el-tag>
			  </template>
			</tree-table>
    </el-card>
		
		<!-- 添加权限的对话框 -->
		<el-dialog title="添加权限" :visible.sync="addAuthDialogVisible" width="50%" @close="addAuthDialogClosed">
		  <!-- 添加分类的表单 -->
		  <el-form :model="addAuthForm" :rules="addAuthFormRules" ref="addAuthFormRef" label-width="100px">
				<!-- <el-form-item label="权限路径：" prop="path">
				  <el-select v-model="addAuthForm.path" placeholder="请选择路径">
				    <el-option :label="item.authName" :value="item.path" v-for="item in pathslist" :key="item._id"></el-option>
				  </el-select>
				</el-form-item> -->
				<el-form-item label="权限名称：" prop="authName">
				  <el-input v-model="addAuthForm.authName"></el-input>
				</el-form-item>
				<el-form-item label="权限路径：" prop="path">
				  <el-input v-model="addAuthForm.path"></el-input>
				</el-form-item>
				<el-form-item label="父级分类：">
		      <!-- options 用来指定数据源 -->
		      <!-- props 用来指定配置对象 -->
		      <el-cascader :options="parentAuthList" :props="cascaderProps" v-model="selectedKeys" @change="parentAuthChanged" clearable>
		      </el-cascader>
		    </el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addAuthDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="addAuth">确 定</el-button>
		  </span>
		</el-dialog>
		
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 权限列表
      authsList: [],
			// 权限路径列表
			pathslist: [],
			// 控制添加权限对话框的显示与隐藏
			addAuthDialogVisible: false,
			// 添加权限的表单数据对象
			addAuthForm: {
			  // 将要添加的权限的名称
			  authName: '',
			  // 父级权限的Id
			  _id: '',
				// 路径
			  path: '',
				// 权限等级
				level: 1
			},
			// 添加权限表单的验证规则对象
			addAuthFormRules: {
			  authName: [
			    { required: true, message: '请输入权限名称', trigger: 'blur' }      
				],
				path: [
				  { required: true, message: '请输入权限路径', trigger: 'blur' }      
				]
			},
			// 父级权限的列表
			parentAuthList: [],
			// 指定级联选择器的配置对象
			cascaderProps: {
			  value: '_id',
			  label: 'authName',
			  children: 'children',
			  expandTrigger: true,
			  checkStrictly: true
			},
			// 选中的父级权限的Id数组
			selectedKeys: [],
			// 为table指定列的定义
			columns: [
			  {
			    label: '权限名称',
			    prop: 'authName'
			  },
			  {
			    label: '路径',
			    prop: 'path'
			  },
			  {
			    label: '权限等级',
			    // 表示，将当前列定义为模板列
			    type: 'template',
			    // 表示当前这一列使用模板名称
			    template: 'level'
			  }
			],
    }
  },
  created () {
    // 获取所有的权限
    this.getAuthsList()
  },
  methods: {
		// 获取权限列表
    async getAuthsList () {
      const { data: res } = await this.$http.get('auths');
      console.log(res)
      if (res.code !== 200) return this.$message.error(res.msg)
			this.$message.success(res.msg)
      this.authsList = res.data;
      console.log(this.authsList)
    },
		async getPathsList() {
			const { data: res } = await this.$http.get('menus')
			console.log('path',res);
			if (res.code !== 200) return this.$message.error(res.msg)
			this.pathslist = res.data;
		},
		// 获取父级权限的数据列表
		async getParentAuthList () {
		  const { data: res } = await this.$http.get('auths');
			console.log(res)
			if (res.code !== 200) return this.$message.error(res.msg)
			this.$message.success(res.msg)
			this.parentAuthList = res.data;
			this.parentAuthList.forEach(item=>{
				if (item.children.length != 0) {
					item.children.forEach(items=> {
						delete items.children
					})
				} else {
					delete item.children
				} 
			})
			console.log('auth',this.authsList)
		},
		// 关闭权限对话框
		addAuthDialogClosed(){
			this.$refs.addAuthFormRef.resetFields()
			this.selectedKeys = [];
			this.addAuthForm.level = 1;
			this.addAuthForm._id = '';
			this.addAuthForm.path = '';
		},
		// 添加权限弹框显示
		goAddAuth() {
			// 获取所有权限路径
			this.getPathsList();
			// 获取父级权限的数据列表
			this.getParentAuthList();
			// 再展示出对话框
			this.addAuthDialogVisible = true
		},
		// 选择项发生变化触发这个函数
		parentAuthChanged() {
			console.log(this.selectedKeys)
			// return;
			// 如果 selectedKeys 数组中的 length 大于0，证明选中了父级分类
			// 反之，就说明没有选中任何父级分类
			if (this.selectedKeys.length > 0) {
			  // 父级分类的Id
			  this.addAuthForm._id = this.selectedKeys[
			    this.selectedKeys.length - 1
			  ]
			  // 为当前分类的等级赋值
			  this.addAuthForm.level = this.selectedKeys.length + 1;
			} else {
			  // 父级分类的Id
			  this.addAuthForm._id = '';
			  // 为当前分类的等级赋值
			  this.addAuthForm.level = 1
			}
		},
		// 点击按钮,添加权限
		addAuth() {
			console.log(this.addAuthForm);
			// return;
			this.$refs.addAuthFormRef.validate(async valid => {
			  if (!valid) return
			  const { data: res } = await this.$http.post('auths',this.addAuthForm)
				console.log(res)
			  if (res.code !== 200) return this.$message.error(res.msg)
			  this.$message.success(res.msg)
			  this.getAuthsList()
			  this.addAuthDialogVisible = false
			})
		}
  }
}
</script>

<style lang="less" scoped>
	.treeTable {
	  margin-top: 15px;
	}
</style>
